<template>
  <view class="payment-container ">
    <view class="page_bg_FAFAFA">
      <view class="pay-info">
        <view class="price-content">
          <image class="img" src="https://www.worldintek.com:39011/yaolexue-service/icon_start_active.png" mode="">
          </image>
          <view class="price">
            {{expendScore}}
          </view>
        </view>
        <!-- <view class="order-num">
          订单编号:23523525235235235235235
        </view> -->

      </view>
      <view class="padd30">
        <view class="total ">
          <view class="score">
            学分总计: {{totalScore}}
          </view>
          <view class="circle-box">
            <view class="circle">

            </view>
          </view>
        </view>
      </view>
    </view>
    <t-button @handleBtnClick="payment()" backGround="#FA312A" content="确认支付"></t-button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        totalScore: 0,
        expendScore: 0,
        quantity: 1,
        goodsId: '',
        addressId: '',
        isNavigating: false
      };
    },
    onLoad(query) {
      console.log(query);
      this.goodsId = query.goodsId,
        this.addressId = query.addressId
      this.expendScore = query.price
      this.totalScore = uni.getStorageSync('goodsInfo').score
      const pages = getCurrentPages();
      console.log(pages);
    },
    methods: {
      async payment() {
        const res = await this.$http.post('/yaolexue-service-portal/order/cashierDeskPay', {
          addressId: this.addressId,
          productId: this.goodsId,
          quantity: this.quantity
        }, {
          showLoading: true
        });
        console.log('payment', res);
        if (res.code === 200) {
          uni.showToast({
            title: '支付成功',
            icon: 'success'
          })
          setTimeout(() => {
            if (!this.isNavigating) {
              this.isNavigating = true;
              uni.redirectTo({
                url: '/subPages/creditMall/creditMall',
                success: () => {
                  // 导航成功后重置标志
                  this.isNavigating = false;
                  uni.navigateBack({
                    delta: 3
                  })
                },
                fail: (err) => {
                  // 处理导航失败（如果需要）
                  console.error('导航失败：', err);
                  this.isNavigating = false;
                }
              });
            }
          }, 1000);
        } else {
          uni.showToast({
            title: '支付失败!',
            icon: 'none'
          });
        }
      }

    }
  }
</script>

<style lang="scss">
  .payment-container {
    .pay-info {
      margin-top: 100rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .price-content {
        display: flex;
        align-items: center;
        justify-content: center;

        .img {
          width: 45rpx;
          height: 44rpx;
        }

        .price {
          font-size: 85rpx;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          margin-left: 20rpx;
        }
      }
    }

    .total {
      width: 689rpx;
      height: 100rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 86rpx;

      .score {
        width: 200rpx;
        height: 25rpx;
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
        margin-left: 20rpx;

      }

      .circle-box {
        width: 24rpx;
        height: 24rpx;
        display: flex;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #FA312A;
        border-radius: 50%;
        margin-right: 26rpx;

        .circle {
          width: 10rpx;
          height: 10rpx;
          background: #FA312A;
          border-radius: 50%;
        }
      }
    }
  }
</style>